<template>
  <cjui-page-panel header="基础柱状图3">
    <template #intro>
      横向柱状图的样式效果。
    </template>
    
    <CjuiEchart :loading="false" :noData="false" :options="chartOption" class="h-full" />
  </cjui-page-panel>
</template>

<script lang="ts" setup>
const chartOption = {
  grid: {
    right: 10,
  },
  xAxis: {
    type: 'value',
  },
  yAxis: {
    type: 'category',
    data: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05'],
    axisTick: {
      show: false,
    },
  },
  tooltip: {},
  series: [
    {
      name: '柱1',
      data: [12, 32, 34, 45, 42],
      type: 'bar',
      barWidth: 20,
    },
  ]
}
</script>
